import { useModel } from "umi";
import { useReactive } from "ahooks";
import { useEffect } from "react";
import { Table } from "antd";
import { Card as SemiCard } from "@douyinfe/semi-ui";

import { FindApplicationsByIsFree } from "../../_graphql/application";

const { Column } = Table;

const OrganizationFreeApplications = () => {
    const { graphqlFetchPlatform, windowInnerHeight } = useModel("global");

    const state = useReactive({
        loading: false,
        applications: [],
    });

    const loadApplications = async () => {
        state.loading = true;
        let res = await graphqlFetchPlatform({
            query: FindApplicationsByIsFree,
            variables: {
                isFree: true,
            },
        });
        state.applications = res?.a?.nodes || [];
        state.loading = false;
    };

    useEffect(() => {
        loadApplications();
    }, []);

    const cardBodyHeight = windowInnerHeight - 90 - 20 - 54;

    return (
        <SemiCard
            title={<span style={{ lineHeight: "32px", fontSize: 15 }}>免费应用列表</span>}
            headerStyle={{ padding: "10px 14px" }}
            shadows="always"
            bordered={false}
            bodyStyle={{ padding: 0, height: cardBodyHeight, overflow: "auto" }}
            style={{ margin: 10 }}
        >
            <Table loading={state.loading} size="small" dataSource={state.applications} rowKey="aiUuid" bordered pagination={false} scroll={{ y: cardBodyHeight - 46 }}>
                <Column title="序号" align="center" width={60} render={(_, r, i) => i + 1} />
                <Column title="应用名称" dataIndex="aiName" align="left" />
                <Column title="所属角色" dataIndex="aiRole" align="center" />
                <Column title="分类名称" dataIndex="aiClas" align="center" />
                <Column title="适用对象" dataIndex="aiObje" align="center" />
                <Column title="登录状态" dataIndex="aiLogn" align="center" width={100} render={(_) => (_ === "localLogined" ? "本地登录" : "远程登录")} />
                <Column title="开发组织" dataIndex="aiSdna" align="center" width={240} />
                <Column title="上下架状态" dataIndex="aiStat" align="center" width={100} />
            </Table>
        </SemiCard>
    );
};

export default OrganizationFreeApplications;
